<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>手机号授权</title>
	<link rel="stylesheet" href="./css/muse-ui.css">
	<link rel="stylesheet" href="./css/main.css" />
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<script src="./js/muse-ui.js"></script>
	<script src="./js/jsencrypt.min.js"></script>
	<style>
		.register {
			min-height: 100%;
			opacity: 0;
			margin-bottom: 20px;
		}

		.register .mu-form-item {}
	</style>
</head>

<body>
	<div id="app">
		<div class="register pd-top-10">
			<div style="text-align: center;padding: 30px 0;">
				<img src="./regis.png" style="width: 80px;" />
			</div>
			<!--<app-header title="注册"></app-header>-->
			<mu-form ref="form" :model="validateForm" class="login-content">
				<p style="color: #343633;font-size: 14px;font-weight: bold;padding: 0 0 10px 10px;">请填写授权账号进行绑定</p>
				<mu-form-item prop="username" :rules="usernameRules">
					<mu-text-field placeholder="请输入手机号" type="tel" v-model="validateForm.username" prop="username">
						<i @click="validateForm.username = ''" v-if="validateForm.username"
							class="iconfont fz-24">&#xe642;</i>
					</mu-text-field>
				</mu-form-item>
				<!--<mu-form-item prop="smscode" :rules="smscodeRules">-->
				<!--	<div class="sms-code">-->
				<!--		<mu-text-field type="tel" placeholder="请输入验证码" v-model="validateForm.smscode" fullWidth />-->
				<!--		<mu-button class="code-btn" @click="getCode" :disabled="canSend">{{codeMsg}}</mu-button>-->
				<!--	</div>-->
				<!--</mu-form-item>-->
				<!-- <mu-form-item>
						<mu-radio>我已阅读</mu-radio>
					</mu-form-item> -->
				<mu-form-item style="margin-top: 20px;">
					<mu-button class="submit-btn" @click="submit">确认</mu-button>
				</mu-form-item>
			</mu-form>
		</div>
	</div>
</body>

<script>
	//api地址
	let url = 'https://apis.ktzapp.com/';
	let appid = 'wx54931ab1b0d400a7';
	let vueInstance = new Vue({
		el: '#app',
		data() {
			return {
				usernameRules: [{
					validate: val => !!val,
					message: "请输入手机号"
				},
				{
					validate: val => (/^[1][3-9][0-9]{9}$/.test(val)),
					message: "请输入正确的手机号"
				}
				],
				smscodeRules: [{
					validate: val => !!val,
					message: "请输入验证码"
				}],
				validateForm: {
					username: "",
					password: "",
					password2: "",
					assetsPassword: '',
					assetsPassword2: '',
					smscode: "",
					nickname: '',
					invitationCode: '',
				},
				visibility: false,
				visibility1: false,
				visibility2: false,
				visibility3: false,

				codeMsg: '获取验证码',
				canSend: false,
				timer: null,
				startTime: null,
				time: 60, //倒计时60秒

				pid: '',
			};
		},
		created() {
			setTimeout(() => {
				//隐藏vue加载过程显示的{{}}
				document.querySelector('.register').style.opacity = 1;
			}, 50)

			//刷新页面验证码倒计时继续
			if (localStorage.vvStratTime) {
				this.sended = true;
				this.startTime = localStorage.vvStratTime;
				this.sending();
			}
		},
		methods: {
			// 手机验证码
			getCode() {
				const formData = {
					mobile: this.validateForm.username,
				}
				if (!(/^[1][3-9][0-9]{9}$/.test(this.validateForm.username))) {
					alert("请输入正确的手机号！");
					return
				} else {
					//发送短信
					axios.post(url + 'other/sendmns', formData).then(res => {
						alert(res.data.msg)
					})
				}

				this.canSend = true;
				this.startTime = new Date().getTime();
				localStorage.setItem('vvStratTime', this.startTime);
				this.sending();
			},
			sending() {
				//验证码倒计时
				let app = this;
				let now = new Date().getTime();
				let time = Math.round((now - app.startTime) / 1000);
				app.codeMsg = `稍等${app.time - time}秒`
				if (time >= app.time) {
					app.canSend = false;
					app.startTime = null;
					app.timer = null;
					app.codeMsg = `获取验证码`
					localStorage.removeItem('vvStratTime')
				} else {
					app.timer = setTimeout(function () {
						app.sending();
					}, 1000)
				}
			},
			submit() {
				//注册
				this.$refs.form.validate().then(result => {
					if (result) {
						document.location.href =
							'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + url + 'Rider/getOpenId?mobile=' +
							this.validateForm.username + '&response_type=code&scope=snsapi_base&state=' +
							this.validateForm.smscode + '#wechat_redirect'
					}
				});
			}
		},
	})
</script>
<script>
	//alert 弹出框样重写样式
	window.alert = function (msg, callback) {
		var div = document.createElement("div");
		div.innerHTML = "<style type=\"text/css\">" +
			".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       " +
			".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            " +
			".nbaDialog { position: fixed; z-index: 5000; width: 80%; max-width: 300px; top: 40%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }" +
			".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         " +
			".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           " +
			".nbaDialog .nbaDialogBd { padding: 20px .27rem;color: #F8436D; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; }                                                                                                                                          " +
			".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          " +
			".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               " +
			".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #009EE2; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       " +
			".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             " +
			"</style>" +
			"<div id=\"dialogs2\" style=\"display: none\">" +
			"<div class=\"nbaMask\"></div>" +
			"<div class=\"nbaDialog\">" +
			"	<div class=\"nbaDialogHd\">" +
			"		<strong class=\"nbaDialogTitle\"></strong>" +
			"	</div>" +
			"	<div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>" +
			"	<div class=\"nbaDialogHd\">" +
			"		<strong class=\"nbaDialogTitle\"></strong>" +
			"	</div>" +
			"	<div class=\"nbaDialogFt\" id=\"dialog_ok2\">" +
			"		<p href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\">确定</p>" +
			"	</div></div></div>";
		document.body.appendChild(div);

		var dialogs2 = document.getElementById("dialogs2");
		dialogs2.style.display = 'block';

		var dialog_msg2 = document.getElementById("dialog_msg2");
		dialog_msg2.innerHTML = msg;

		var dialog_ok2 = document.getElementById("dialog_ok2");
		dialog_ok2.onclick = function () {
			dialogs2.style.display = 'none';
		};
	};
</script>

</html>